import Avatar from "../../utils/Avatar";
import {Button, Divider, List} from "antd-mobile";
import {SmileOutline, TeamOutline, UserOutline} from "antd-mobile-icons";
import {useNavigate} from "react-router";
import {getUserInfo} from "../../utils/network";
import {useState} from "react";
import LoginDialog from "../../utils/LoginDialog";
import {userController} from "../../utils/http/UserController";


const MyPage = () => {

    const navigate = useNavigate();
    const [user, setUser] = useState(userController.getUserInfo());
    const [visible, setVisible] = useState<boolean>(false);
    let userComp;
    if(user === null){
        userComp = (
            <>
                <Avatar radius={80} />
                <div style={{
                    display: "flex",
                    margin: "1rem 0",
                    width: "30%",
                    justifyContent: "space-between"
                }}>
                    <Button color={"primary"} size={"mini"} onClick={()=>setVisible(true)}>请登录</Button>
                    <Button color={"primary"} size={"mini"} onClick={()=>navigate("./signup")}>注册</Button>
                </div>
            </>
        )
    }else{
        userComp = (
            <>
                <Avatar radius={80} src={user.avatar}/>
                <span>{user.nickname}</span>
                <Button color={"primary"} size={"mini"} onClick={()=>{
                    userController.exit();
                    setUser(userController.getUserInfo());
                }}>退出</Button>
            </>
        )
    }

    return (
        <>
            <div style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "flex-end",
                alignItems: "center",
                width: "100%",
                height: "30%"
            }}>
                {userComp}
            </div>
            <Divider style={{
                borderStyle: "solid",
                borderColor: "#00000033",
                marginBottom: "3rem"
            }}/>

            <List style={{
                borderRadius: "0.5rem"
            }}>
                <List.Item prefix={<UserOutline />} onClick={()=>{navigate("./info")}}>个人信息</List.Item>
                <List.Item prefix={<TeamOutline />} onClick={()=>{navigate("./passengers")}}>我的乘客</List.Item>
                <List.Item prefix={<SmileOutline />} onClick={()=>{}}>关于我们</List.Item>
            </List>
            <LoginDialog visible={visible} onClose={()=>setVisible(false)} success={setUser}/>
        </>
    );
}

export default MyPage;
